<template>    
    <a-modal
      destroyOnClose
      :title="title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      width="1000px"
      @ok="handleOk"
      @cancel="handleCancel">
      <title-name title="考核信息"></title-name>
      <a-form-model 
        ref="ruleForm"
        :label-col="{span: 6 }"
        :wrapper-col="{span: 18 }"
        :rules="rules"
        :model="form"
        >
      <a-row>
        <a-col :md="12" :sm="12">
          <a-form-model-item label="分公司"
                        :labelCol="{lg: {span: 6}, sm: {span:6}}"
                        :wrapperCol="{lg: {span: 18}, sm: {span: 18} }" prop="branchCompany" >
            <SelectSubCompany :autoSelected='false' placeholder="请选择" v-model="form.branchCompany" @change="changeCompany" :disabled="types=='view'"></SelectSubCompany>
          </a-form-model-item>
        </a-col>
        <a-col :md="12" :sm="12">
          <a-form-model-item label="项目名称"
                        :labelCol="{lg: {span: 6}, sm: {span:6}}"
                        :wrapperCol="{lg: {span: 18}, sm: {span: 18} }" prop="projectId">
            <SelectProject :autoSelected='false'  placeholder="请选择" v-model="form.projectId" :isClear="false" :disabled="types=='view'"
                            :form="form" keyValue="branchCompany" @change="getProjectId"></SelectProject>
          </a-form-model-item>
        </a-col>
        <a-col :md="12" :sm="12">
          <a-form-model-item  label="分包商" prop="subContractorId">
            <a-select placeholder="请选择" show-search :filter-option="filterOption" allowClear @popupScroll="scrollMore" :getPopupContainer="getPopupContainer" :disabled="form.types=='view'" v-model="form.subContractorId">
              <a-icon slot="suffixIcon" type="search" />
              <a-spin v-if="loading" slot="notFoundContent" size="small" />
              <a-select-option v-for="item in subList" :key="item.subcontractorsId" :value="item.subcontractorsId">{{item.subcontractors}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="12" :sm="12">
          <a-form-model-item label="考核评价" prop="evaluate">
            <a-select  placeholder="请选择"   :disabled="form.types=='view'" v-model="form.evaluate">
              <a-spin v-if="loading" slot="notFoundContent" size="small" />
              <a-select-option v-for="item in statusCodes" :key="item.id" :label="item.name" :value="item.id">{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="12" :sm="12">
          <a-form-model-item label="审核类型" prop="type">
            <a-select  placeholder="请选择"  :disabled="form.types=='view'" v-model="form.type">
              <a-spin v-if="loading" slot="notFoundContent" size="small" />
              <a-select-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-model-item label="情况说明" prop="information">
            <BaseTextarea :disabled="form.types=='view'" :maxLength='300' v-model="form.information" type="textarea"  placeholder="请输入" />
          </a-form-model-item>
        </a-col>
      </a-row>
      </a-form-model>
      <title-name title="相关证明附件"></title-name>
      <div>
        <a-row>
          <a-col :md="24" :sm="19">
            <div class="table-operator">
              <a-row>
                <a-col :span="24">
                    <a-form-model-item
                        label="附件上传"
                        :label-col="{ lg: 2, md: 3, sm: 3 }"
                        :wrapper-col="{ lg: 22, md: 21, sm: 21 }">
                        <div>
                            <upload-list
                                :businessCode="'PM11'"
                                :editModel="2"
                                :showUpload.sync="isClose"
                                :disabled="form.types=='view'"
                                :uploadArrys.sync="form.proveCommonIdList"
                                multiple
                            ></upload-list>
                        </div>
                    </a-form-model-item>
                </a-col>
              </a-row>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-modal>
</template>

<script>
  import { themeChoose } from '@/mixin/mixin'
  import {getStatusCodeData } from '@/api/subcontractors/labor'
  import { getSubcontractorsByProject } from '@/api/subcontractors/standing'
  import UploadList from '@/components/UploadList'
  import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
  import SelectProject from '@/components/Select/SelectProject' // 项目
  export default {
   mixins:[themeChoose],
   components:{
     UploadList,
     SelectSubCompany,
     SelectProject
   },
  props: {
    form:{
      type:Object,
    },
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    isClose: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default:'新增分包商考核'
    },
  },
  data() {
    return {
      confirmLoading:false,
      form:{
        proveCommonIdList:[]
      },
      businessCode:'',
      disabled:false,
      show:true,
      types:'',
      loading:false,
      typeList:[],
      statusCodes:[],
      subList:[],

      projectId:'',
      pageNo: 1,
      pageSize: 20,

      // 校验规则
      rules: {
        branchCompany: [{ required: true, message: '请选择分公司', trigger: 'change' }],
        projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
        subContractorId: [{ required: true, message: '请选择分包商', trigger: 'change' }],
        evaluate: [{ required: true, message: '请选择考核评价', trigger: 'change' }],
        type: [{ required: true, message: '请选择审核类型', trigger: 'change' }],
        information: [{ required: true, message: '请输入情况说明', trigger: 'change' }],
      }, 
    }
  },
  created(){

    this.getStatusCodeData()
  },
  methods: {
    getProjectId(val){
      this.getSubcontractorsByProject(val)
    },
    handleCancel(){
          this.$emit("handleCancel")
    },
    scrollMore(e) {
      const { target } = e
      var total = target.scrollTop + target.offsetHeight
      var scrollHeight = target.scrollHeight

      // this.pageNo是当前页 this.totalPage是总页数
      if (total >= scrollHeight - 1 && total < scrollHeight + 1 && this.pageNo <= this.totalPage ) {
        this.pageNo = this.pageNo + 1
        this.getSubcontractorsByProject() // 调用api方法
      }
    },
    getSubcontractorsByProject(val){
      this.loading=true
      getSubcontractorsByProject({projectId:val,pageSize: this.pageSize, pageNo: this.pageNo}).then(res=>{
        this.subList = res.data
        this.loading=false
      })
    },
    changeCompany(value){
      console.log(value)
      this.$set(this.form,'projectId','')
    },
    getPopupContainer(triggerNode){
      return  triggerNode.parentNode
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    getStatusCodeData(){
      this.loading=true
      getStatusCodeData({type:4, enabledCode:1}).then(res=>{
          this.statusCodes = res.data
          this.loading=false
            let arr = []
            res.data.forEach(function(obj,i) {
              let item = {}
              if(obj){
                item.value = obj.id
                item.label = obj.name
              }
              arr.push(item)
            })
            console.log(arr)
      })
      getStatusCodeData({type:6}).then(res=>{
          this.typeList = res.data
          this.loading=false
      })
    },
    handleOk(){
      this.$refs.ruleForm.validate(valid=>{
        if(valid){
          this.$emit("handleok",this.form)
        }
      })
    }
  }
}
</script>

